<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>岗位技能详情</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        #table th {
            border: 1px solid #ccc;
        }

        #table td {
            border: 1px solid #ccc;
        }

        .gwzz-main .edit-table-item {
            background: #c82011;
            border-radius: 4px;
            padding: 4px 23px;
            display: inline-block;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            margin-left: 10px;
        }

        .gwmc,
        .gwzz,
        .gwzz-title {
            color: #777;
        }
        .upload-excel{
            position: absolute;
            right:10px;
            background: #c82011;
            border-radius: 4px;
            padding: 4px 23px;
            display: inline-block;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            margin-left: 10px;
        }
        .file-box #myfile {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }
    </style>
    <script src="cs/jquery.min.js"></script>
    <script>
        var data2 = {
            "code": 200,
            "message": "请求成功",
            "data": [{
                "id": 162,
                "name": "大数据开发工程师",
                "level": 1,
                "iconValue": "大数据研发工程师.png",
                "falg": 1,
                "childrenList": [{
                    "id": 163,
                    "name": "规划及建设大数据平台。负责大数据存储系统、分布式计算系统、挖掘算法等设计、研发以及维护、优化工作。参与项目的系统设计和核心代码开发。整理和提交技术文档，负责核心功能模块的代码编写和测试工作。",
                    "parentId": 162,
                    "level": 2,
                    "falg": 0,
                    "childrenList": [{
                        "id": 164,
                        "name": "大数据基础",
                        "parentId": 163,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 165,
                        "name": "Linux操作系统应用",
                        "parentId": 163,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 166,
                        "name": "Hadoop技术",
                        "parentId": 163,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 167,
                        "name": "python技术及应用",
                        "parentId": 163,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 168,
                        "name": "大数据存储技术",
                        "parentId": 163,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 169,
                        "name": "Spark技术",
                        "parentId": 163,
                        "level": 3,
                        "falg": 0,
                        "childrenList": [{
                            "id": 171,
                            "name": "Spark环境搭建",
                            "parentId": 169,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 180,
                                "name": "Spark独立模式环境搭建、SparkOnYarn环境搭建、基于IDEA搭建Spark编程环境",
                                "parentId": 171,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 189,
                                    "name": "分布式计算框架(spark)",
                                    "parentId": 180,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 172,
                            "name": "Spark编程模型",
                            "parentId": 169,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 181,
                                "name": "RDD创建、RDD转换操作和行动操作、RDD存储操作和持久化操作、RDD的共享变量",
                                "parentId": 172,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 190,
                                    "name": "分布式计算框架(spark)",
                                    "parentId": 181,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 173,
                            "name": "Spark集群调优",
                            "parentId": 169,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 182,
                                "name": "Spark核心原理、Spark运行架构、Spark的Shuffle流程以及Spark集群运行参数说明",
                                "parentId": 173,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 191,
                                    "name": "分布式计算框架(spark)",
                                    "parentId": 182,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 174,
                            "name": "parkSQL",
                            "parentId": 169,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 183,
                                "name": "SparkSQL原理、DataFrame和DataSet应用、DataFrame转换操作和行动操作",
                                "parentId": 174,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 192,
                                    "name": "分布式计算框架(spark)",
                                    "parentId": 183,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 175,
                            "name": "SparkStreaming",
                            "parentId": 169,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 184,
                                "name": "SparkStreaming流式处理概念、DStream创建与应用、DStream有状态操作、窗口函数",
                                "parentId": 175,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 193,
                                    "name": "分布式计算框架(spark)",
                                    "parentId": 184,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }]
                    }, {
                        "id": 170,
                        "name": "数据分析与挖掘技术",
                        "parentId": 163,
                        "level": 3,
                        "falg": 0,
                        "childrenList": [{
                            "id": 176,
                            "name": "监督学习-回归",
                            "parentId": 170,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 185,
                                "name": "线性回归、逻辑回归、定序回归、泊松回归、生存回归",
                                "parentId": 176,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 194,
                                    "name": "数据分析与挖掘",
                                    "parentId": 185,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 177,
                            "name": "监督学习-分类",
                            "parentId": 170,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 186,
                                "name": "决策树、集成学习、贝叶斯分类器、支持向量机",
                                "parentId": 177,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 195,
                                    "name": "数据分析与挖掘",
                                    "parentId": 186,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 178,
                            "name": "非监督学习-降维",
                            "parentId": 170,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 187,
                                "name": "主成分分析、因子分析、流形学习",
                                "parentId": 178,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 196,
                                    "name": "数据分析与挖掘",
                                    "parentId": 187,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 179,
                            "name": "非监督学习-聚类",
                            "parentId": 170,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 188,
                                "name": "K-means、DBSCAN、层次聚类",
                                "parentId": 179,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 197,
                                    "name": "数据分析与挖掘",
                                    "parentId": 188,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }]
                    }]
                }]
            }]
        }
        var data = {
            "code": 200,
            "message": "请求成功",
            "data": [{
                "id": 271,
                "name": "大数据运维工程师",
                "level": 1,
                "iconValue": "大数据运维工程师.png",
                "falg": 1,
                "childrenList": [{
                    "id": 272,
                    "name": "熟悉Hadoop集群，熟悉Hadoop或Spark生态相关技术；了解linux/windows服务器操作系统、数据库（如oracle、mysql）技术等基础软件产品；了解主流如VMware服务器虚拟化环境；熟悉OpenStack架构，能够部署基础组件及核心模块；熟悉python、shell，具有实际脚本编写能力；熟悉分布式云存储、传统存储等技术；了解系统、网络、存储、数据库、安全等基本原理\n。",
                    "parentId": 271,
                    "level": 2,
                    "falg": 0,
                    "childrenList": [{
                        "id": 273,
                        "name": "大数据基础",
                        "parentId": 272,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 274,
                        "name": "Linux操作系统应用",
                        "parentId": 272,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 275,
                        "name": "大数据应用技术",
                        "parentId": 272,
                        "level": 3,
                        "falg": 0,
                        "childrenList": [{
                            "id": 279,
                            "name": "Hadoop环境搭建",
                            "parentId": 275,
                            "level": 4,
                            "falg": 0,
                            "childrenList": []
                        }, {
                            "id": 280,
                            "name": "HadoopHDFS开发",
                            "parentId": 275,
                            "level": 4,
                            "falg": 0,
                            "childrenList": []
                        }, {
                            "id": 281,
                            "name": "HadoopMapReduce开发",
                            "parentId": 275,
                            "level": 4,
                            "falg": 0,
                            "childrenList": []
                        }, {
                            "id": 282,
                            "name": "HadoopMR模式分析",
                            "parentId": 275,
                            "level": 4,
                            "falg": 0,
                            "childrenList": []
                        }, {
                            "id": 283,
                            "name": "Haoop综合应用",
                            "parentId": 275,
                            "level": 4,
                            "falg": 0,
                            "childrenList": []
                        }]
                    }, {
                        "id": 276,
                        "name": "python技术及应用",
                        "parentId": 272,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 277,
                        "name": "大数据存储技术",
                        "parentId": 272,
                        "level": 3,
                        "falg": 0,
                        "childrenList": []
                    }, {
                        "id": 278,
                        "name": "大数据运维技术",
                        "parentId": 272,
                        "level": 3,
                        "falg": 0,
                        "childrenList": [{
                            "id": 284,
                            "name": "运维基础",
                            "parentId": 278,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 288,
                                "name": "云计算概念、背景、与大数据关系；大数据运维方法论、工具、技术；",
                                "parentId": 284,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 292,
                                    "name": "大数据运维",
                                    "parentId": 288,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 285,
                            "name": "虚拟化技术",
                            "parentId": 278,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 289,
                                "name": "虚拟化技术分类、架构；KVM虚拟化技术、VMware虚拟化技术、OpenStack技术、Docker技术",
                                "parentId": 285,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 293,
                                    "name": "大数据运维",
                                    "parentId": 289,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 286,
                            "name": "大数据技术",
                            "parentId": 278,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 290,
                                "name": "hadoop运维、hive、hbase、redis、mongodb存储运维、flume、kafka、storm、spark运维",
                                "parentId": 286,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 294,
                                    "name": "大数据运维",
                                    "parentId": 290,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }, {
                            "id": 287,
                            "name": "监控技术",
                            "parentId": 278,
                            "level": 4,
                            "falg": 0,
                            "childrenList": [{
                                "id": 291,
                                "name": "Nagios监控技术、ganglia监控技术、Splunk监控技术",
                                "parentId": 287,
                                "level": 5,
                                "falg": 0,
                                "childrenList": [{
                                    "id": 295,
                                    "name": "大数据运维",
                                    "parentId": 291,
                                    "level": 6,
                                    "iconValue": "",
                                    "falg": 0,
                                    "childrenList": []
                                }]
                            }]
                        }]
                    }]
                }]
            }]
        };

        var treeList = [];
        var demoList = [];
        console.log(data);
        data = data.data;
        data2 = data2.data;
        //add(data);
        //1描述 2技能模块 3子技能 4知识点 5对应课程

        $(function () {
            var jsonStr = getQueryString("id");
            console.log(jsonStr, 332);
            getTPSDData(jsonStr);
        });

        //获取url参数值
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            var q = window.location.pathname.substr(1).match(reg_rewrite);
            if (r != null) {
                return unescape(r[2]);
            } else if (q != null) {
                return unescape(q[2]);
            } else {
                return null;
            }
        }
        function getTPSDData(id) {
            $.ajax({
                type: "get",
                url: "/SchoolMS2.0/querySkillInfo?skillId=" + id,
                success: function (data, status, xhr) {
                    console.log(data, 665);
                    if (data.code == 200) {
                        data = data.data;
                    }
                    add2(data);
                },
                error: function (data, status, xhr) {
                    //loading1.hide();
                    var json = JSON.stringify({
                        "pageName": "error"
                    });
                    //window.location.href = "skipPage?jsonStr=" + json;

                }
            });
        }

        //修改保存
        function editSubmit() {
            let id = $("#level-text").data("id")
            console.log(id);
            console.log($("#level-text").val());
            $.ajax({
                type: "get",
                url: "/SchoolMS2.0/updateSkillInfo?skillId=" + id + "&name=" + $("#level-text").val(),
                success: function (data, status, xhr) {
                    if (data.code == 200) {

                        var jsonStr = getQueryString("id");
                        console.log(jsonStr, 332);
                        getTPSDData(jsonStr);
                        $(".biu").hide();
                    }
                },
                error: function (data, status, xhr) {
                    //loading1.hide();
                    var json = JSON.stringify({
                        "pageName": "error"
                    });
                    //window.location.href = "skipPage?jsonStr=" + json;

                }
            });
        }

        function uploadFile() {
            var crowd_file = $('#myfile')[0].files[0];
            var formData = new FormData();
            formData.append("file", $('#myfile')[0].files[0]);
            $.ajax({
                url: '/SchoolMS2.0/skill/model-import',
                dataType: 'json',
                type: 'POST',
                async: false,
                data: formData,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    if (data.code == 200) {
                        $(".biu2").show();
                        //alert('上传成功！');
                    }

                },
                error: function (response) {
                    console.log(response);
                }
            });
        }

        function editLevel(obj) {
            $(".biu1").show();
            $("#level-text").val(obj.data("data").name).data("id",obj.data("data").id);
            console.log(obj);
            console.log(obj.data("data").id);
            console.log(obj.data("data").name);
        }

        function add2(arr) {
            $("#table tbody").empty();
            console.log(arr);
            //1职位
            $(".gwmc").html(arr[0].name);
            item1 = arr[0].childrenList;
            //2描述
            $(".item1").html(item1[0].name);
            //描述修改
            let item1Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                id: item1[0].id,
                name: item1[0].name
            }).click(function () {
                editLevel($(this))
            });
            let tr = $("<tr></tr>");
            let td = $("<td></td>").html(item1[0].name).append(item1Btn);
            $(".gwzz").html(item1[0].name).append(item1Btn);
            tr.append(td);
            $("#table tbody").append(tr);
            //3技能模块
            item2 = item1[0].childrenList;
            $.each(item2, function (i, d) {
                let item2Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                    id: d.id,
                    name: d.name
                }).click(function () {
                    editLevel($(this))
                });
                let td = $("<td></td>").html(d.name).append(item2Btn);
                if (d.childrenList.length != 0) {
                    td.attr("rowspan", d.childrenList.length);
                }
                if (i > 0) {
                    let tr = $("<tr></tr>");
                    tr.append(td);
                    $("#table tbody").append(tr);
                    if (d.childrenList.length != 0) {
                        //加标识，以便之后添加child
                        tr.addClass("itemnum_" + d.childrenList[0].id);
                    } else {
                        tr.append("<td></td>");
                        tr.append("<td></td>");
                        tr.append("<td></td>");
                    }
                    console.log(td);
                } else {
                    console.log($("#table tbody tr").eq(0));
                    $("#table tbody tr").eq(0).append(td);
                    if (d.childrenList.length != 0) {
                        //加标识，以便之后添加child
                        $("#table tbody tr").eq(0).addClass("itemnum_" + d.childrenList[0].id);
                    } else {
                        tr.append("<td></td>");
                        tr.append("<td></td>");
                        tr.append("<td></td>");
                    }

                }

                let item3 = d.childrenList;
                //console.log(item3);
                if (item3 && item3.length > 0) {
                    $.each(item3, function (i2, d2) {
                        let item3Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                            id: d2.id,
                            name: d2.name
                        }).click(function () {
                            editLevel($(this))
                        });
                        let td2 = $("<td></td>").html(d2.name).append(item3Btn);
                        //下一级知识点
                        let zsd = d2.childrenList;
                        if (i2 == 0) {
                            $(".itemnum_" + d.childrenList[0].id).append(td2);
                            if (zsd.length != 0) {
                                let item4Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                                    id: zsd[0].id,
                                    name: zsd[0].name
                                }).click(function () {
                                    editLevel($(this))
                                });
                                let td3 = $("<td></td>").html(zsd[0].name).append(item4Btn);
                                $(".itemnum_" + d.childrenList[0].id).append(td3);
                                //对应课
                                if (zsd[0].childrenList.length != 0) {
                                    let item5Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                                        id: zsd[0].childrenList[0].id,
                                        name: zsd[0].childrenList[0].name
                                    }).click(function () {
                                        editLevel($(this))
                                    });
                                    let item5a = $("<div class='edit-table-item'><a style='color:#fff;' href='/SchoolMS2.0/skipCourseStudyDetail?jsonStr={\"courseId\":\"37\"}'>查看</a></div>");
                                    //http://119.3.109.70:60006/SchoolMS2.0/skipCourseStudyDetail?jsonStr={"courseId":"37"}
                                    let td4 = $("<td></td>").html(zsd[0].childrenList[0].name).append(item5Btn,item5a);
                                    $(".itemnum_" + d.childrenList[0].id).append(td4);
                                } else {
                                    let td4 = $("<td></td>");
                                    $(".itemnum_" + d.childrenList[0].id).append(td4);
                                }
                            } else {
                                $(".itemnum_" + d.childrenList[0].id).append("<td></td>");
                                $(".itemnum_" + d.childrenList[0].id).append("<td></td>");
                            }
                            console.log(d2.childrenList, 55);
                        } else {
                            console.log($(".itemnum_" + d.childrenList[0].id), 333);
                            let tr2 = $("<tr></tr>");
                            tr2.append(td2);
                            $(".itemnum_" + d.childrenList[0].id).after(tr2);
                            if (zsd != 0) {
                                let item4Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                                    id: zsd[0].id,
                                    name: zsd[0].name
                                }).click(function () {
                                    editLevel($(this))
                                });
                                let td3 = $("<td></td>").html(zsd[0].name).append(item4Btn);
                                tr2.append(td3);
                                //对应课
                                if (zsd[0].childrenList.length != 0) {
                                    let item5Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                                        id: zsd[0].childrenList[0].id,
                                        name: zsd[0].childrenList[0].name
                                    }).click(function () {
                                        editLevel($(this))
                                    });
                                    let item5a = $("<div class='edit-table-item'><a style='color:#fff;' href='/SchoolMS2.0/skipCourseStudyDetail?jsonStr={\"courseId\":\"32\"}'>查看</a></div>");
                                    let td4 = $("<td></td>").html(zsd[0].childrenList[0].name).append(item5Btn,item5a);
                                    tr2.append(td4);
                                } else {
                                    let td4 = $("<td></td>");
                                    tr2.append(td4);
                                }
                            } else {
                                tr2.append("<td></td>");
                                tr2.append("<td></td>");
                            }
                        }
                    });
                }
            });
            //职位描述所占行数
            $("#table tbody tr").eq(0).find("td").eq(0).attr("rowspan", $("#table tbody tr").length).hide();
        }
    </script>
</head>

<body class="inner_body">
<!-- 弹出层 -->
<div class="biu biu1">
    <div class="biu-bg"></div>
    <div class="biu-box">
        <div class="biu-title">
            修改
            <div class="biu-close" onclick="$(this).parents('.biu').hide();"></div>
        </div>
        <div class="biu-main">
            <input id="level-text" type="text" class="form-control">
        </div>
        <div class="biu-footer">
            <div onclick="editSubmit()" class="biu-btn">保存修改</div>
        </div>
    </div>
</div>
<div class="biu biu2">
    <div class="biu-bg"></div>
    <div class="biu-box">
        <div class="biu-title">
            提示！
            <div class="biu-close" onclick="$(this).parents('.biu').hide()"></div>
        </div>
        <div class="biu-main">
            上传成功!
        </div>
        <div class="biu-footer">
        </div>
    </div>
</div>
<div class="crumbs">
    <div class="index-img"></div>
    <a onclick="window.parent.location.reload();" href="javascript:void(0)" class="sy">首页</a><label>&gt;</label><a href="javascript:void(0)"
                                                                                                                   class="mbx">岗位技能</a>
</div>
</div>
<div class="content_box">
    <div class="title_nav clearfix">
        <div class="title_box_select fl active" id="table_one">岗位技能</div>
    </div>
    <div class="panel">
        <!-- //1描述 2技能模块 3子技能 4知识点 5对应课程 -->

        <div class="gwzz-main">
            <div style="position: relative;">
                <div class="upload-excel publicBtn fl file-box" style="margin-right:20px;">Excel上传
                    <input type="file" id="myfile" onchange="uploadFile()" />
                </div>
                <h2 class="gwmc"></h2>
                <span class="gwzz-title" style="font-weight: bold;">岗位职责：</span>
                <span class="gwzz"></span>
            </div>
            <table id="table" class="table-style" width="100%">
                <thead>
                <tr>
                    <th>工作领域</th>
                    <th>工作任务</th>
                    <th>学习知识点</th>
                    <th>关联课程</th>
                    <!-- <th>技能模块</th>
                    <th>子技能</th>
                    <th>知识点</th>
                    <th>对应课程</th> -->
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

</body>

</html>